<template>
  <div
    style="
      width: 100%;
      height: calc(100% - 50px);
      position: relative;
      padding: 24px 32px;
      -webkit-box-sizing: border-box;
    "
  >
    <div
      style="
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        height: 100%;
        width: 100%;
        padding: 0px 12px;
        overflow-y: auto;
        overflow-x: hidden;
      "
    >
      <h3 style="text-align: left; margin-left: 24px">教师信息</h3>
      <div class="border"></div>
      <div
        style="
          text-align: left;
          margin: 0 24px;
          font-size: 12px;
          height: calc(100% - 72px);
        "
      >
        <div style="width: 100%; margin-bottom: 24px">
          <el-button
            @click="addRow()"
            class="filter-item"
            style="
              background-color: #cce2ff;
              color: gray;
              border: 0px;
              font-size: 12px;
            "
            type="success"
            icon="el-icon-edit"
          >
            添加
          </el-button>
          <el-button
            class="filter-item"
            style="
              background-color: #cce2ff;
              color: gray;
              border: 0px;
              float: right;
              font-size: 12px;
            "
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            查询
          </el-button>

          <el-select
            v-model="form.teacher_title"
            placeholder="请选择教师职称"
            style="width: 20%; float: right; margin-left: 10px; font-size: 12px"
          >
            <el-option
              style="font-size: 12px"
              v-for="item in form.options_title"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            v-model="form.teacher_id"
            placeholder="请输入教师编号"
            style="width: 20%; font-size: 12px; float: right"
          ></el-input>
        </div>
        <div style="height: calc(100% - 117px); margin-bottom: 12px">
          <el-table
            :data="tableform"
            ref="tableform"
            border
            stripe="true"
            align="center"
            :header-cell-style="tableHeaderColor"
            style="width: 100%; height: 100%"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              prop="teacher_id"
              label="教师编号"
              align="center"
              min-width="80"
            >
            </el-table-column>
            <el-table-column
              prop="teacher_name"
              label="教师姓名"
              align="center"
              min-width="90"
            >
            </el-table-column>
            <el-table-column
              prop="teacher_sex"
              label="教师性别"
              align="center"
              min-width="70"
            >
            </el-table-column>
            <el-table-column
              prop="teacher_account"
              label="账号"
              align="center"
              min-width="110"
            >
            </el-table-column>
            <el-table-column
              prop="teacher_password"
              label="密码"
              align="center"
              min-width="110"
            >
            </el-table-column>
            <el-table-column
              prop="teacher_title"
              label="职称"
              align="center"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="teacher_phone"
              label="联系方式"
              align="center"
              min-width="110"
            >
            </el-table-column>
            <el-table-column
              prop="opp"
              label="操作"
              align="center"
              min-width="300"
            >
              <template slot-scope="scope">
                <el-button
                  @click="handleEdit(scope.$index, scope.row)"
                  type="text"
                  >编辑</el-button
                >
                <el-button
                  @click="handleDelete(scope.$index, tableform)"
                  type="text"
                  style="color: #f56c6c"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          style="display: flex; justify-content: flex-end; margin-bottom: 12px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
    <div class="el-dialog">
      <el-dialog :title="title" :visible.sync="addFormVisible">
        <div
          style="
            width: 100%;
            height: 1px;
            background: #606266;
            margin-bottom: 24px;
          "
        ></div>
        <div style="margin: 12px 0 0 0px">
          <el-form ref="addFormRef" :rules="addFormRules" :model="addForm">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="教师编号"
                  prop="teacher_id"
                  label-position="right"
                  label-width="110px"
                >
                  <el-input
                    v-model="addForm.teacher_id"
                    autocomplete="off"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="教师姓名"
                  label-position="right"
                  label-width="110px"
                >
                  <el-input
                    v-model="addForm.teacher_name"
                    autocomplete="off"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="teacher_password"
                  label="密码"
                  label-position="right"
                  label-width="110px"
                >
                  <el-input
                    type="password"
                    v-model="addForm.teacher_password"
                    autocomplete="off"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  prop="teacher_account"
                  label="账号"
                  label-position="right"
                  label-width="110px"
                >
                  <el-input
                    v-model="addForm.teacher_account"
                    autocomplete="off"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="性别"
                  label-position="right"
                  label-width="110px"
                >
                  <template>
                    <el-radio v-model="addForm.teacher_sex" label="男"
                      >男</el-radio
                    >
                    <el-radio v-model="addForm.teacher_sex" label="女"
                      >女</el-radio
                    >
                  </template>
                </el-form-item></el-col
              >
              <el-col :span="12">
                <el-form-item
                  label="职称"
                  label-position="right"
                  label-width="110px"
                >
                  <template>
                    <el-radio v-model="addForm.teacher_title" label="授课教师"
                      >授课教师</el-radio
                    >
                    <el-radio v-model="addForm.teacher_title" label="教务老师"
                      >教务老师</el-radio
                    >
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="teacher_phone"
                  label="联系方式"
                  label-position="right"
                  label-width="110px"
                >
                  <template>
                    <el-input
                      v-model="addForm.teacher_phone"
                      autocomplete="off"
                      style="width: 80%"
                    ></el-input>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <div style="display: flex; justify-content: flex-end">
              <el-button
                type="primary"
                @click="sumbitAddRow()"
                :loading="addLoading"
                >确 定</el-button
              >
              <!-- <el-button type="info" @click="cancel()">取 消</el-button> -->
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!-- 编辑页面 -->
    <el-dialog
      title="修改教师信息"
      :visible.sync="editFormVisible"
      class="dialog"
    >
      <el-form
        :model="editForm"
        ref="editForm"
        style="margin-left: 50px"
        :rules="addFormRules"
      >
        <p>教师编号</p>
        <el-form-item :label-width="formLabelWidth">
          <el-input
            v-model="editForm.teacher_id"
            autocomplete="off"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <p>教师姓名</p>
        <el-form-item :label-width="formLabelWidth">
          <el-input
            v-model="editForm.teacher_name"
            autocomplete="off"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <p>教师性别</p>
        <el-form-item :label-width="formLabelWidth">
          <template>
            <el-radio v-model="editForm.teacher_sex" label="男">男</el-radio>
            <el-radio v-model="editForm.teacher_sex" label="女">女</el-radio>
          </template>
        </el-form-item>
        <p>教师职称</p>
        <el-form-item :label-width="formLabelWidth">
          <template>
            <el-radio v-model="editForm.teacher_title" label="授课教师">
              授课教师</el-radio
            >
            <el-radio v-model="editForm.teacher_title" label="教务老师">
              教务老师</el-radio
            >
          </template>
        </el-form-item>
        <p>联系方式</p>
        <el-form-item :label-width="formLabelWidth">
          <template>
            <el-input
              v-model="editForm.teacher_phone"
              autocomplete="off"
              style="width: 80%"
            ></el-input>
          </template>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          type="primary"
          @click="sumbitAddRow()"
          :loading="addLoading"
          style="
            background-color: #a69041;
            color: white;
            border: 0px;
            margin-left: 45px;
          "
          >确 定</el-button
        >
        <el-button type="info" @click="cancel()">取 消</el-button>
      </div>
      <!-- </div> -->
    </el-dialog>
    <!-- </el-card> -->
  </div>
</template>

<script>
// 获取后台数据
import { getTeacherList } from '@/api/table'
// import {validator} from '@/validator/validator'
var _index //定义一个全局变量，以获取行数据的行号

export default {
  name: 'teacherinfo',
  data() {
    var checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      if (regMobile.test(value)) {
        // 验证通过，合法的手机号
        return callback()
      }
      // 验证不通过，不合法
      callback(new Error('请输入合法的手机号'))
    }
    return {
      addFormRules: {
        teacher_id: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        teacher_password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],

        teacher_phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        teacher_account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 8, max: 8, message: '请输入8位账号', trigger: 'blur' }
        ]
      },
      checked: true,
      tableform: [],
      title: '',
      // formLabelWidth: "120px",
      editFormVisible: false, //是否显示编辑窗口
      editForm: [],
      addFormVisible: false, //是否显示新增窗口
      addLoading: false,
      addForm: [],
      listLoading: true,

      // radio: 1,
      //日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      //搜索
      searchData: '',

      dialogFormVisible: false,

      form: {
        teacher_id: '',
        teacher_name: '',
        teacher_sex: '',
        teacher_account: '',
        teacher_password: '',
        teacher_title: '',
        teacher_phone: 200333,

        options_title: [
          {
            value: '选项1',
            label: '授课教师'
          },
          {
            value: '选项2',
            label: '教务老师'
          }
        ],

        options_sex: [
          {
            value: '选项1',
            label: '男'
          },
          {
            value: '选项2',
            label: '女'
          }
        ],
        value: ''
      },

      tableform: [
        {
          num: '1',
          teacher_id: '001',
          teacher_name: '王小虎',
          teacher_sex: '男',
          teacher_account: '12345@16',
          teacher_password: '44555',
          teacher_title: '授课教师',
          teacher_phone: 200333
        },
        {
          num: '1',
          teacher_id: '001',
          teacher_name: '王小虎',
          teacher_sex: '男',
          teacher_account: '12345@16',
          teacher_password: '44555',
          teacher_title: '教务老师',
          teacher_phone: 200333
        },
        {
          num: '1',
          teacher_id: '001',
          teacher_name: '王小虎',
          teacher_sex: '男',
          teacher_account: '12345@16',
          teacher_password: '44555',
          teacher_title: '授课教师',
          teacher_phone: 200333
        }
      ]
    }
  },

  methods: {
    // handleClick(row) {
    //   console.log(row);
    // },

    tableRowStyle({ row, rowIndex }) {
      return 'height:2px;padding:1px 0'
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color:#425066;color:white;'
      }
    },

    //获取数据
    getData() {
      var url = '@/static/table.json'
      this.$http
        .get(url)
        .then((data) => {
          console.log(data)
          this.tableform = data.body
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //编辑数据
    handleEdit(index, row) {
      this.title = '编辑'
      this.addFormVisible = true
      this.addForm = Object.assign({}, row)
      // _index = index
      // console.log(index)
      // console.log(_index)
      //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
    },
    //保存编辑
    sumbitEditRow() {
      var editData = _index

      this.tableform[editData].teacher_id = this.editForm.teacher_id
      this.tableform[editData].teacher_name = this.editForm.teacher_name
      this.tableform[editData].teacher_sex = this.editForm.teacher_sex
      this.tableform[editData].teacher_account = this.editForm.teacher_account
      this.tableform[editData].teacher_password = this.editForm.teacher_password
      this.tableform[editData].teacher_title = this.editForm.teacher_title
      this.tableform[editData].teacher_phone = this.editForm.teacher_phone
      this.editFormVisible = false
    },

    //新增数据
    addRow() {
      this.title = '新增'
      this.addFormVisible = true
      this.addForm = {
        teacher_id: '',
        teacher_name: '',
        teacher_sex: '男',
        teacher_title: '讲师',
        teacher_account: '',
        teacher_password: '',
        teacher_title: '',
        teacher_phone: ''
        // name: "",
        // age: "",
        // radio: 1,
        // data: "",
        // address: "",
      }
    },
    //将新增的数据添加到表格中
    sumbitAddRow() {
      this.$refs.addFormRef.validate((valid) => {
        if (valid) {
          this.tableform = this.tableform || []
          this.tableform.push({
            teacher_id: this.addForm.teacher_id,
            teacher_name: this.addForm.teacher_name,
            teacher_sex: this.addForm.teacher_sex,
            teacher_account: this.addForm.teacher_account,
            teacher_password: this.addForm.teacher_password,
            teacher_title: this.addForm.teacher_title,
            teacher_phone: this.addForm.teacher_phone
          })
          this.addFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.addFormVisible = false
      this.editFormVisible = false
    },
    //删除数据
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableform.splice(index, 1)
          //   storage.set("tableform", this.tableform);
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch((err) => {
          this.$message({
            type: 'error',
            message: err
          })
        })
    }

    // 从后台获取数据
    // fetchData() {
    //   this.listLoading = true
    //   getTeacherList().then(response => {
    //     this.tableform = response.data.items
    //     this.listLoading = false
    //   })
    // }
  },

  mounted() {
    this.getData()
  },
  created() {
    this.fetchData()
  }
}
</script>

<style lang="scss">
.border {
  width: 100%;
  height: 1px;
  background: #eeeeee;
  margin: 0 24px 12px 24px;
}

.el-dialog .el-dialog__body {
  padding-top: 0px !important;
}
</style>